<template>
  <div id="titleInfo">
    <div class="main">
      <Row>
        <Col span="24" class="maxTitle">
          <Row>
            <Col span="24">
              <!-- 标题 -->
              <span class="title">{{Title.title}}</span>
              <!-- 学习人数 -->
              <span class="total">{{Title.numbers}}人在学</span>
            </Col>
          </Row>
          <Row>
            <Col span="24" class="desc">
            <!-- 视频图标 -->
              <Icon type="logo-youtube" color="#D9D9D9" size="20" />
              <!-- 多少课时  多少时间 难度 -->
              <span>{{Title.classs}}课时&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;约{{Title.minute}}分钟&nbsp;&nbsp;&nbsp;难度:&nbsp;&nbsp;{{Title.difficulty}}</span>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
//导入iview-ui 组件
import { Row, Col, Icon } from "view-design";
export default {
  name: "titleInfo",
  //组件注册
  components: {
    Row,
    Col,
    Icon
  },
  //传入属性
  props:['Title'],
  data() {
    return {
      
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
/* 局部UI样式修改 */
.maxTitle {
  padding: 15px 18px;
  background-color: white;
  /* margin-bottom: 8px; */
}

.total {
  float: right;
  font-size: 8px;
  color: #888;
}
.desc {
  vertical-align: middle;
  font-size: 10px;
  color: #888;
  padding-top: 8px;
}
</style>